<script lang="ts" setup name="HeaderLine">
interface Props {
  title: string
  fontSize?: number | string
  backIsSHow?: boolean
  confirmIsSHow?: boolean
  onBack?: () => void
  onConfirm?: () => void
}
const router = useRouter()
withDefaults(defineProps<Props>(), {
  title: '',
  fontSize: 16,
  backIsSHow: true,
  confirmIsSHow: true,
})
interface Emits {
  (name: 'onSubmit'): void
}
const emits = defineEmits<Emits>()
</script>

<template>
  <div>
    <div class="flx-justify-between">
      <div :class="['fsize' + fontSize]" style="font-weight: 600">{{ title }}</div>
      <div>
        <slot name="button" />
        <el-button v-if="confirmIsSHow" type="primary" @click="emits('onSubmit')">保存</el-button>
        <el-button v-if="backIsSHow" @click="router.back()">返回</el-button>
        <slot></slot>
      </div>
    </div>
    <el-divider />
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-divider--horizontal) {
  margin: 5px 0;
}
</style>
